<template>
	<view>
		<view class="container">
			<view class="tui-wallet__box">
				<view class="tui-content__box">
					<view class="tui-my__assets">
						<text>我的资产</text>
						<image @tap="toggle" mode="widthFix"
							:src="'https://sggg.88688.team/obs/yyjk/mall/' + (isShow ? 'img_show_3x.png' : 'img_hide_3x.png')"></image>
					</view>
					<view class="tui-assets__center">
						<!-- // <view class="tui-item__box">
						// 	<text>余额</text>
						// 	<view v-if="isShow">￥<text class="tui-text__large">{{nowMoney}}</text></view>
						// 	<view v-else><text class="tui-text__large">****</text></view>
						// </view> -->
						<view class="tui-item__box" @tap="bankCard">
							<text>银行卡</text>
							<view v-if="isShow"><text class="tui-text__large">{{ cardCount }}</text>张</view>
							<view v-else><text class="tui-text__large">****</text></view>
						</view>
						<view class="tui-item__box" @tap="coupon">
							<text>优惠券</text>
							<view v-if="isShow"><text class="tui-text__large">{{ couponCount }}</text>张</view>
							<view v-else><text class="tui-text__large">****</text></view>
						</view>
					</view>
					<view class="tui-assets__bottom" v-if="chongzhi == 1">
						<view @tap='goPayment' style="color: #fff;">
							<text class='main-pic'></text>立即充值
						</view>
					</view>
					<view class="tui-tag__box" @tap="records">账单</view>
					<!-- // <view class="tui-tag__boxTwo" @tap="withdrawal">提现</view> -->
				</view>
				<view class="tui-recharge__box" v-if="payFaceToFace.length > 0">
					<view class="tui-title">当面付记录</view>
					<block v-for="(item, index) in payFaceToFace" :key="index">
						<view class="tui-list-cell">
							<view class="tui-amount__box">
								<view class="tui-amount__title">支付成功：{{ item.actualPrice }}元</view>
							</view>
							<view class="tui-amount__box">
								<view class="tui-amount__desc">{{ item.addTime }}</view>
								<view class="tui-amount">支付成功：{{ item.actualPrice }}元</view>
							</view>
							<view class="tui-badge tui-bg__appoint">
								<view class="tui-scale__text">{{ item.shopsName || '' }}</view>
							</view>
						</view>
					</block>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
const util = require("@/utils/util.js")
const app = getApp()
export default {
	data() {
		return {
			isShow: true,
			nowMoney: '',
			payFaceToFace: [],
			cardCount: 0,
			couponCount: 0,
			chongzhi: 2
		}
	},
	onLoad: function (options) {
		var that = this;
		that.chongzhi = app.globalData.rechargeStatus
		that.nowMoney = options.now
		that.getMy()
	},
	// 下拉刷新
	onPullDownRefresh: function () {
		// 显示顶部刷新图标
		uni.showNavigationBarLoading();
		this.getMy();
		// 隐藏导航栏加载框
		uni.hideNavigationBarLoading();
		// 停止下拉动作
		uni.stopPullDownRefresh();
	},
	methods: {
		toggle() {
			this.isShow = !this.isShow
		},
		records() {
			uni.navigateTo({
				url: '/pages/ucenter/records/records',
			})
		},
		withdrawal() {
			console.log("用户点击了提现", uni.getStorageSync('userInfo').openId)
			var bodydata = {
				"openId": uni.getStorageSync('userInfo').openId,
				"money": 0.01,
				"remark": "资产提现"
			}
			util.request('pay/wxTransfers', bodydata).then(function (res) {
				console.log("提现接口返回值", res)
				// if (res.code === 0) {
				// 	that.cardCount = res.data.length || 0
				// }
			});
		},
		getMy() {
			var that = this;
			util.request('coupon/userCount').then(function (res) {
				if (res.code === 0) {
					that.couponCount = res.data || 0
				}
			});
			util.request('user/payFaceToFaceList').then(function (res) {
				if (res.code === 0) {
					that.payFaceToFace = res.data
				}
			});
			util.request('user/getBankCard').then(function (res) {
				if (res.code === 0) {
					that.cardCount = res.data.length || 0
				}
			});
			util.request('coupon/userCount').then(function (res) {
				if (res.code === 0) {
					that.couponCount = res.data || 0
				}
			});
		},
		goPayment: function () {
			uni.navigateTo({
				url: '/pages/ucenter/chongzhi/chongzhi',
			})
		},
		coupon: function () {
			uni.navigateTo({
				url: '/pages/ucenter/coupon/coupon',
			})
		},
		bankCard: function () {
			uni.navigateTo({
				url: '/pages/ucenter/bankCard/bankCard',
			})
		}
	}
}
</script>

<style>
.tui-wallet__box {
	width: 100%;
	padding: 0 30rpx;
	box-sizing: border-box;
}

.tui-content__box {
	width: 100%;
	height: 300rpx;
	border-radius: 24rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	background: linear-gradient(90deg, rgb(123 93 103), rgb(84 55 243));
	position: relative;
	box-shadow: 0 3rpx 20rpx rgba(235, 9, 9, 0.2);
}

.tui-my__assets {
	width: 100%;
	color: #fff;
	font-size: 32rpx;
	font-weight: bold;
	padding: 30rpx 0;
	box-sizing: border-box;
	display: flex;
	align-items: center;

}

.tui-my__assets image {
	width: 36rpx;
	height: 28rpx;
	margin-left: 16rpx;
	display: block;
}

.tui-assets__center,
.tui-assets__bottom {
	width: 100%;
	padding: 0 30rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-sizing: border-box;
}

.tui-item__box {
	width: 33.3333%;
	text-align: center;
	color: #fff;
	font-size: 26rpx;
	flex-shrink: 0;
}

.tui-text__large {
	font-size: 35rpx;
	font-weight: bold;
}

.tui-assets__bottom {
	position: absolute;
	left: 0;
	bottom: 0;
	padding-top: 16rpx;
	box-shadow: 0px -5px 10px -5px rgba(255, 255, 255, .3);
}

.tui-assets__bottom .tui-item__box {
	width: 25%;
	font-size: 24rpx;
	padding-bottom: 16rpx;
	opacity: 0.8;
}

.tui-assets__bottom .tui-text__large {
	font-size: 32rpx;
}

.tui-recharge__box {
	width: 100%;
	padding: 40rpx 30rpx;
	box-sizing: border-box;
	margin-top: 30rpx;
	border-radius: 24rpx;
	background-color: #fff;
}

.tui-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #222222;
	padding-bottom: 20rpx;
}

.tui-list-cell {
	width: 100%;
	height: 160rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	background: #FFF0F1;
	border-radius: 10rpx;
	margin-top: 20rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
}

.tui-amount__title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333333;
}

.tui-amount__desc {
	font-size: 24rpx;
	font-weight: 400;
	color: #333333;
}

.tui-amount__box {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tui-amount {
	font-size: 26rpx;
	font-weight: 600;
	color: #333333;
	text-align: center;
	min-width: 142rpx;
	margin-left: auto;
}

.tui-badge {
	height: 32rpx;
	border-radius: 10rpx 0;
	font-size: 25rpx;
	font-weight: 400;
	color: #FFFFFF;
	position: absolute;
	left: 0;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.tui-bg__appoint {
	background: #0170FE;
}

.tui-scale__text {
	width: 100%;
	text-align: center;
	transform: scale(0.8);
	transform-origin: center center;
}

.tui-tag__box {
	position: absolute;
	right: 0;
	top: 30rpx;
	border: 1rpx solid #fff;
	border-right: 0 !important;
	color: #fff;
	font-size: 24rpx;
	border-radius: 100rpx 0 0 100rpx;
	padding: 4rpx 16rpx;
	text-align: center;
}

.tui-tag__boxTwo {
	position: absolute;
	right: 0;
	top: 100rpx;
	border: 1rpx solid #fff;
	border-right: 0 !important;
	color: #fff;
	font-size: 24rpx;
	border-radius: 100rpx 0 0 100rpx;
	padding: 4rpx 16rpx;
	text-align: center;
}

.main-pic {
	background-repeat: no-repeat;
	background-size: 100% 100%;
	width: 50rpx;
	height: 50rpx;
	display: inline-block;
	vertical-align: middle;
	margin-right: 11rpx;
	background-image: url("");
}
</style>
